<template>
  <a-card>
    <div style="display: flex; justify-content: flex-end; margin-bottom: 20px">
      <div style="margin-right: 60px">
        <a-input-search
          :placeholder="$t('user.verification-code.required11156611057501111')"
          style="width: 300px"
          v-model="searchInfo"
          @search="onSearch"
          @change="changeinout"
        />
      </div>
      <a-button
        type="primary"
        html-type="submit"
        icon="plus"
        @click="showModal(false)"
        >{{ $t("user.verification-code.required11156611042") }}
      </a-button>
    </div>
    <a-table
      ref="table"
      size="middle"
      class="h-full overflow-x-auto"
      :dataSource="listData"
      @change="tableChange"
      :pagination="false"
      :rowKey="
        (record, index) => {
          return index;
        }
      "
    >
      <!-- 题号 -->
      <a-table-column key="TopicId" data-index="TopicId" width="200px">
        <span slot="title" class="min-w-90p">{{
          $t("user.verification-code.required1115661105724")
        }}</span>
      </a-table-column>
      <a-table-column key="TopicTitle" data-index="TopicTitle" width="300px">
        <span slot="title" class="min-w-90p">{{
          $t("user.verification-code.required1115661105750")
        }}</span>
      </a-table-column>
      <a-table-column
        key="TopicCreatetime"
        data-index="TopicCreatetime"
        width="200px"
      >
        <span slot="title" class="min-w-90p">{{
          $t("user.verification-code.required1115661105752")
        }}</span>
      </a-table-column>
      <a-table-column key="TopicType" data-index="TopicType" width="200px">
        <span slot="title" class="min-w-90p">{{
          $t("user.verification-code.required1115661105751")
        }}</span>
        <template slot-scope="text, record">
          <span>
            <div v-if="record.TopicType == 1">{{$t("user.verification-code.one")}}</div>
            <div v-if="record.TopicType == 2">{{$t("user.verification-code.two")}}</div>
            <div v-if="record.TopicType == 3">{{$t("user.verification-code.tian")}}</div>
            <div v-if="record.TopicType == 4">{{$t("user.verification-code.shu")}}</div>
            <div v-if="record.TopicType == 5">{{$t("user.verification-code.shu.en")}}</div>
            <div v-if="record.TopicType == 6">{{$t("user.verification-code.required111566110403")}}</div>
            <div v-if="record.TopicType == 7">{{$t("user.verification-code.required111566110404")}}</div>

          </span>
        </template>
      </a-table-column>

      <a-table-column
        key="action"
        :title="$t('app.setting.othersettings')"
        width="200px"
      >
        <template slot-scope="text, record">
          <span>
            <a-button type="link" @click="edit(record.Id)">{{
              $t("user.verification-code.required111566147")
            }}</a-button>
            <!-- <a-button type="link" @click="del(record.Id)">{{ $t('app.setting.copy') }}</a-button> -->
            <a-popconfirm
              :title="$t('user.verification-code.required111566110577225')"
              :ok-text="$t('user.verification-code.required1166')"
              :cancel-text="$t('user.email.required11')"
              @confirm="() => del(record.Id)"
            >
              <a-button type="link" size="small" style="margin-left: 9px">{{
                $t("menu.exception.trigger")
              }}</a-button>
            </a-popconfirm>
          </span>
        </template>
      </a-table-column>
    </a-table>

    <a-pagination
      size="small"
      v-model="pagination.page"
      :total="pagination.total"
      hideOnSinglePage
      :pageSize.sync="pagination.pageSize"
      @change="getList"
    />

    <a-drawer
      :title="modalTitle"
      placement="right"
      :closable="false"
      :visible="modalVisible"
      @close="closeDrawer"
      :width="500"
    >
      <a-form
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
        labelAlign="right"
      >
        <a-form-item
          :label="$t('user.verification-code.required1115661105753')"
          v-show="false"
          class="hidden"
        >
          <a-input
            :placeholder="$t('user.verification-code.required111566110575311')"
            disabled
            v-decorator="['Id']"
            width="200px"
          />
        </a-form-item>
        <a-form-item
          :label="$t('user.verification-code.required1115661105754')"
          v-show="false"
          class="hidden"
        >
          <a-input
            :placeholder="$t('user.verification-code.required111566110575311')"
            disabled
            v-decorator="['TopicId']"
          />
        </a-form-item>
        <!-- 题目名称 -->
        <a-form-item
          :label="$t('user.verification-code.required1115661105750')"
        >
        <br/>
          <a-textarea
            :placeholder="$t('user.verification-code.required111566110575011')"
            :auto-size="{ minRows: 3, maxRows: 5 }"
            style="margin-left: -70px;"
            v-decorator="[
              'TopicTitle',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required111566110575033443'
                    ),
                  },
                ],
              },
            ]"
          />
        </a-form-item>
        <!-- 题目权重 -->
        <a-form-item
          :label="$t('user.verification-code.required11156611057111111')"
          class="sp-item"
        >
          <a-input-number
            v-decorator="[
              'TopicWeight',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required11156611057732445'
                    ),
                  },
                ],
              },
            ]"
            :placeholder="$t('user.verification-code.required11156611057111111')"
            style="width: 100%; "
            :min="0"
            :precision="0"
          />
        </a-form-item>
        <!-- 补充文字 -->
        <!-- <a-form-item
          v-if="TopicRequiredif"
          :label="$t('user.verification-code.required1115661105755')"
          @validateFields="
            (e) => {
              if (e) this.setValus(2);
            }
          "
        >
          <a-radio-group
            v-decorator="[
              'TopicRequired',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required1115661105755334433'
                    ),
                  },
                ],
              },
            ]"
            @change="requiredOnChange"
          >
            <a-radio :value="0">
              {{ $t("user.verification-code.required1115661105756") }}
            </a-radio>
            <a-radio :value="1">
              {{ $t("user.verification-code.required1115661105757") }}
            </a-radio>
          </a-radio-group>
        </a-form-item> -->
        <!-- 题目类型 -->
        <a-form-item :label="$t('user.verification-code.required11156611054')">
          <a-select
            v-decorator="[
              'TopicType',
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required111566110577306'
                    ),
                  },
                ],
              },
            ]"
            option-filter-prop="children"
            :filter-option="filterOption"
            show-search
            @change="handleChangeProbType"
            :placeholder="
              $t('user.verification-code.required11156611057513456543')
            "
          >
            <a-select-option :value="1">
              {{ $t("user.verification-code.required11156611038") }}
            </a-select-option>
            <a-select-option :value="2">
              {{ $t("user.verification-code.required11156611039") }}
            </a-select-option>
            <a-select-option :value="3">
              {{ $t("user.verification-code.required11156611040") }}
            </a-select-option>
            <a-select-option :value="4">
              {{ $t("user.verification-code.required111566110401") }}
            </a-select-option>
            <a-select-option :value="5">
              {{ $t("user.verification-code.required111566110402") }}
            </a-select-option>
            <a-select-option :value="6">
              {{ $t("user.verification-code.required111566110403") }}
            </a-select-option>
            <a-select-option :value="7">
              {{ $t("user.verification-code.required111566110404") }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <!-- 选项 带特殊题型 -->
        <div v-if="probTypeShow">
          <div v-for="(item, i) in itemNum" :key="item">
            <a-form-item
              style="margin-left: -20px"
              class="mb-0"
              :label="
                $t('user.verification-code.required111566110577182') +
                item +
                '：'
              "
            >
              <a-input
                v-decorator="[
                  'AnswerInfo-' + item + '-' + i,
                  {
                    rules: [
                      {
                        required: true,
                        message: $t(
                          'user.verification-code.required111566110577318'
                        ),
                      },
                    ],
                  },
                ]"
                :placeholder="
                  $t('user.verification-code.required1115661105759')
                "
              />
            </a-form-item>
            <!-- 补充文字 特殊题型 -->
            <a-form-item
              v-if="!TopicRequiredif"
              :label="$t('user.verification-code.required1115661105755')"
              class="mb-0"
            >
              <a-radio-group
                v-decorator="[
                  'TopicRequired' + item + '+' + i,
                  {
                    rules: [
                      {
                        required: true,
                        message: $t(
                          'user.verification-code.required1115661105755334433'
                        ),
                      },
                    ],
                  },
                ]"
                @change="requiredOnChange"
                :class="isLang ? '' : 'option-enter'"
              >
                <a-radio :value="0">
                  {{ $t("user.verification-code.required1115661105756") }}
                </a-radio>
                <a-radio :value="1">
                  {{ $t("user.verification-code.required1115661105757") }}
                </a-radio>
              </a-radio-group>
            </a-form-item>

            <!-- 互斥项 -->
            <a-form-item
              v-if="!TopicRequiredif"
              :label="$t('user.verification-code.required1115661105755.answerMutex')"
            >
              <a-radio-group
                v-decorator="[
                  'AnswerMutex' + item + '*' + i,
                  {
                    rules: [
                      {
                        required: true,
                        message: $t(
                          'user.verification-code.required1115661105755334433.answerMutex'
                        ),
                      },
                    ],
                  },
                ]"
                @change="requiredOnChange"
                :class="isLang ? '' : 'option-enter'"
              >
                <a-radio :value="0">
                  {{ $t("user.verification-code.required1115661105756.no") }}
                </a-radio>
                <a-radio :value="1">
                  {{ $t("user.verification-code.required1115661105756.yes") }}
                </a-radio>
              </a-radio-group>
            </a-form-item> 

          </div>
        </div>
        <!-- 选项 -->
        <a-form-item
          class="sp-item"
           v-show="probTypeShow"
          v-for="item in optionsList"
          :key="item.id"
          :label="$t('user.verification-code.required111566110575099999')"
        >
        <br/>
          <a-button
            type="link"
            @click="deleteOption(item.id)"
            class="delete-button"
          >{{ $t('app.setting.copy') }}</a-button>
          <a-input
            :placeholder="
              $t('user.verification-code.required1115661105750119999990')
            "
            style="margin-left: -70px;"
            :auto-size="{ minRows: 3, maxRows: 5 }"
            v-decorator="[
            'AnswerInfo-' + item.id,
              {
                rules: [
                  {
                    required: true,
                    message: $t(
                      'user.verification-code.required1115661105750334438888889'
                    ),
                  },
                ],
              },
            ]"
          />
          <!-- 补充文字 -->
          <a-form-item
            v-show="probTypeShow"
            class="sp-item-child"
            :label="$t('user.verification-code.required1115661105755')"
          >
          <!-- 不补充 补充 按钮 -->
            <a-radio-group
              v-decorator="[
                'TopicRequired +' + item.id,
                {
                  rules: [
                    {
                      required: true,
                      message: $t(
                        'user.verification-code.required1115661105755334433'
                      ),
                    },
                  ],
                },
              ]"
              @change="requiredOnChange"
              class="button-one"
            >
              <a-radio :value="0">
                {{ $t("user.verification-code.required1115661105756") }}
              </a-radio>
              <a-radio :value="1">
                {{ $t("user.verification-code.required1115661105757") }}
              </a-radio>
            </a-radio-group>
          </a-form-item>
          
          <!-- 互斥项 -->
          <a-form-item
            v-show="probTypeShow"
            class="sp-item-child"
            :label="$t('user.verification-code.required1115661105755.answerMutex')"
          >
            <a-radio-group
              v-decorator="[
                'AnswerMutex *' + item.id,
                {
                  rules: [
                    {
                      required: true,
                      message: $t(
                        'user.verification-code.required1115661105755334433.answerMutex'
                      ),
                    },
                  ],
                },
              ]"
              @change="requiredOnChange"
              class="button-one"
            >
                <a-radio :value=0>
                  {{ $t("user.verification-code.required1115661105756.no") }}
                </a-radio>
                <a-radio :value=1>
                  {{ $t("user.verification-code.required1115661105756.yes") }}
                </a-radio>
            </a-radio-group>
          </a-form-item>


        </a-form-item>



        <!-- 添加选项 -->
        <a-button
          @click="addRemark"
          class="add-options-btn"
          v-if="
            form.getFieldValue('TopicType') === 1 ||
            form.getFieldValue('TopicType') === 2
          "
          >{{ $t( "user.verification-code.required1115661814455999") }}
        </a-button>
      </a-form>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'center',
          zIndex: 1,
        }"
      >
        <a-button style="margin-right: 8px" @click="closeDrawer"
          >{{ $t("user.email.required11") }}
        </a-button>
        <a-button type="primary" @click="submitCreate"
          >{{ $t("user.verification-code.required1166") }}
        </a-button>
      </div>
    </a-drawer>
  </a-card>
</template>

<script>
import {
  dpiaQuestionLists,
  dpiaQuestionDelete,
  dpiaQuestionRead,
  dpiaActionModelCreate,
} from "@/api/dpia/form";
import { dpiaQuestionCreate, dpiaQuestionChange } from "@/api/dpia/json";

const columns = [
  {
    title: "题号",
    className: "min-w-90p",
    dataIndex: "TopicId",
    align: "center",
  },
  {
    title: "题目名称",
    className: "min-w-90p",
    dataIndex: "TopicTitle",
    align: "center",
  },
  {
    title: "题目类型",
    className: "min-w-90p",
    dataIndex: "topicTypeAction",
    align: "center",
    scopedSlots: { customRender: "topicTypeAction" },
  },
  {
    title: "最后更新时间",
    className: "min-w-90p",
    dataIndex: "TopicCreatetime",
    align: "center",
  },
  {
    title: "操作",
    width: "280px",
    dataIndex: "",
    align: "center",
    scopedSlots: { customRender: "action" },
  },
];

const data = [];
export default {
  name: "dpia",
  data() {
    return {
      // 是否展现选项数
      probTypeShow: false,
      TopicRequiredif: false,
      // 编辑时的数据集合
      answerSetList: {},
      form: this.$form.createForm(this),
      data: data,
      columns: columns,
      inputList: [],
      list: data,
      num: "",
      modalTitle: "新增app",
      modalVisible: false,
      confirmLoading: false,
      probType: undefined,
      itemNum: 0,
      idd: "",
      optionsList: [],
      listData: [],
      pagination: {
        page: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
      },
      searchInfo: "",
      isLang: localStorage.getItem("lang").includes("zh-CN"),
    };
  },
  created() {
    this.init();
  },
  mounted() {
    let that = this
    window.addEventListener("setItemEvent", function (e) {
      if (e.key == "lang") {
        let lang = JSON.parse(e.value);
        if (lang == "zh-EN") {
          that.isLang = false;
        } else {
          that.isLang = true;
        }
      }
    });
    
  },
  methods: {
    addRemark() {
      this.optionsList.push({
        id: +new Date()
      })
    },
    async init() {
      this.getList();
    },
    async submitCreate() {
      // 提交创建题目
      const {
        form: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      // validateFields 是校验form表单数据
      // force: true 是默认所有字段都校验
      // values 表单的值
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          try {
            const params = { ...values };
            // 组成答案
            var data = [];
            // 处理答案
            var paramsKey = Object.keys(values);
            // console.log('values-----?',values);
            // console.log("paramsKey", paramsKey);

            paramsKey.forEach((element) => {
              // 根据字符串判断截取需要
              var items = element.split("-");
              if (items.length > 1) {
                // 是答案
                var AnswerItems = {
                  AnswerInfo: values[element],
                };
                if (this.idd) {
                  if (this.answerSetList[items[2]] != undefined) {
                    AnswerItems["Id"] = this.answerSetList[items[2]];
                  }
                }
                data.push(AnswerItems);
              }
            });

            // 处理必选项
            var arrdata = [];
            // return 获取多选状态下的是否展示注释框 只有多选下走这里
            if (!this.TopicRequiredif) {
              paramsKey.forEach((element) => {
                // 当有多选时做这一步操作
                var ioem = element.split("+");
                if (ioem.length > 1) {
                  // 取值
                  arrdata.push({ AnswerRequired: values[element] });
                }
              });
              for (var index = 0; index < arrdata.length; index++) {
                data[index].AnswerRequired = arrdata[index].AnswerRequired;
              }
            }

            // 处理互斥项
            var MutexData = [];
            // return 获取多选状态下的是否展示注释框 只有多选下走这里
            if (!this.TopicRequiredif) {
              paramsKey.forEach((element) => {
                // 当有多选时做这一步操作
                var  MutexIoem = element.split("*");
                if (MutexIoem.length > 1) {
                  // 取值
                  MutexData.push({ AnswerMutex: values[element] });
                }
              });
              for (var index = 0; index < MutexData.length; index++) {
                data[index].AnswerMutex = MutexData[index].AnswerMutex;
              }
            }
            params.Answer = data;
            console.log('data1111',data);
            // params.Id == undefined
            params.Id
              ? await dpiaQuestionChange(params)
              : await dpiaQuestionCreate(params);

            this.$message.success(
              this.$t("user.verification-code.required111566110577308")
            );
            this.modalVisible = false;
            this.getList();
          } catch (error) {
            this.$message.error(error);
          } finally {
            this.loading = false;
          }
        } else {
          setTimeout(() => {
            this.loading = false;
          }, 600);
        }
      });
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    async getList() {
      await this.$nextTick();
      this.idd = "";
      this.listLoading = true;
      const { page, pageSize } = this.pagination;
      try {
        // 调用查询列表
        const { data } = await dpiaQuestionLists({
          ...{ page, pageSize },
          ...this.queryForm,
          TopicTitle: this.searchInfo ? this.searchInfo : undefined,
        });
        // 解构赋值
        const { Page, PageSize, Total, Lists } = data;
        // 给table赋值
        this.listData = Lists || [];
        // 给分页数据赋值
        this.pagination = {
          page: Page,
          pageSize: PageSize,
          total: Total,
        };
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
    tableChange() {},
    requiredOnChange(e) {
      console.log(e.target.value);
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    showModal() {
      // 添加
      this.form.resetFields();
      this.modalTitle = this.$t("user.verification-code.required11156611042");
      this.probTypeShow = false;
      this.modalVisible = true;
      // 初始化数据
      // this.inputList = [];
      // 如果备注一个都没有就初始化一个
      // if (this.inputList.length < 1) {
      //   this.addInput();
      // }
    },
    // 添加input框
    // addInput() {
    // 新增一个新的数据初始化
    // this.inputList.push({
    // value: "",
    // editable: true,
    // });
    // },
    //修改input框
    async editInput(item, index) {
      item.editable = true;
    },
    // 添加
    addInput() {
      var objData = new Date();
      var year = objData.getFullYear();
      var month = objData.getMonth() + 1;
      var day = objData.getDate();
      if (objData.getSeconds() < 10) {
        var seconds = "0" + objData.getSeconds();
      } else {
        var seconds = objData.getSeconds();
      }
      if (objData.getMinutes() < 10) {
        var miuntes = "0" + objData.getMinutes();
      } else {
        var miuntes = objData.getMinutes();
      }
      if (objData.getHours() < 10) {
        var hours = "0" + objData.getHours();
      } else {
        var hours = objData.getHours();
      }
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      // 新增一个新的数据初始化
      this.inputList.push({
        value: "",
        editable: true,
        actionCreateTime:
          year +
          "-" +
          month +
          "-" +
          day +
          " " +
          hours +
          ":" +
          miuntes +
          ":" +
          seconds,
        actionCreateUser: this.ActionCreateUserName,
        actionCreateUserId: this.ActionCreateUser,
      });
    },
    //编辑
    async editInput(item, index) {
      item.editable = true;
    },
    //备注确认
    async okInput(item, index1) {
      // 修改状态为不可编辑
      item.editable = false;
      if (Object.keys(item).indexOf("Id") != -1) {
        // 更新
        const { data } = await dpiaActionBeizhuUpdate({
          Id: item.Id,
          ActionRemarkInfo: item.value,
          ActionId: this.id,
          ActionType: 1,
        });
        item.actionCreateTime = data.ActionUpdatetime;
      } else {
        // 新增
        const { data } = await dpiaActionBeizhuadd([
          {
            ActionRemarkInfo: item.value,
            ActionId: this.id,
            ActionType: 1,
          },
        ]);
        // 赋值
        item.Id = data.Id;
        item.actionCreateTime = data.ActionCreatetime;
      }
    },
    //删除
    async deleteInput(item) {
      await dpiaActionBeizhuDelete({ Id: item.Id });
      const index = this.inputList.indexOf(item);
      this.inputList.splice(index, 1);
    },
    //备注确认
    async okInput(item, index1) {
      // 修改状态为不可编辑
      item.editable = false;
      if (Object.keys(item).indexOf("Id") != -1) {
        // 更新
        const { data } = await dpiaActionBeizhuUpdate({
          Id: item.Id,
          ActionRemarkInfo: item.value,
          ActionId: this.id,
          ActionType: 1,
        });
        item.actionCreateTime = data.ActionUpdatetime;
      } else {
        // 新增
        const { data } = await dpiaActionBeizhuadd([
          {
            ActionRemarkInfo: item.value,
            ActionId: this.id,
            ActionType: 1,
          },
        ]);
        // 赋值
        item.Id = data.Id;
        item.actionCreateTime = data.ActionCreatetime;
      }
    },
    //删除
    async deleteInput(item) {
      await dpiaActionBeizhuDelete({ Id: item.Id });
      const index = this.inputList.indexOf(item);
      this.inputList.splice(index, 1);
    },
    // 编辑
    async edit(id) {
      // console.log("idididididididid", id);
      this.idd = id;
      // 修改
      this.modalTitle = this.$t(
        "user.verification-code.required111566110577161"
      );
      this.modalVisible = true;
      // 清除数据
      this.form.resetFields();
      const { data } = await dpiaQuestionRead({ Id: id });
      // console.log("data--------------------", data);
      
      this.form.setFieldsValue({
        Id: id,
        TopicId: data.TopicId,
        TopicTitle: data.TopicTitle,
        TopicRequired: data.TopicRequired,
        AnswerMutex: data.AnswerMutexAVal,
        TopicType: data.TopicType,
      });
      await this.$nextTick();
      var answerData = {};
      this.answerSetList = [];
      if (data.Answer) {
        for (var i = 0; i < data.Answer.length; i++) {
          answerData["AnswerInfo-" + (i + 1) + "-" + i] =
            data.Answer[i].AnswerInfo;
          answerData["TopicRequired" + (i + 1) + "+" + i] =
            data.Answer[i].AnswerRequired;
          answerData["AnswerMutex" + (i + 1) + "*" + i] =
            data.Answer[i].AnswerMutex;

          // 根据下标匹配对应的ID，好用于反查
          this.answerSetList[i] = data.Answer[i].Id;
        }
        this.handleChangeItemNum(data.Answer.length);
        this.num = data.Answer.length;
      }
      // console.log("answerData", answerData);
    
      this.handleChangeProbType(data.TopicType);
      let res = null;
      if (Array.isArray(data.Answer)) {
        res = data.Answer.length;
      }
      await this.$nextTick();
      this.form.setFieldsValue({
        ...{
          Id: id,
          TopicTitle: data.TopicTitle,
          TopicWeight: data.TopicWeight,
          TopicRequired: data.TopicRequired,
          AnswerMutex: data.AnswerMutexAVal,
          TopicType: data.TopicType,
          itemNum: res,
          TopicId: data.TopicId,
        },
        ...answerData,
      });
    },
    // 关闭抽屉
    closeDrawer() {
      this.optionsList=[];
      this.addAppForm = {};
      this.form.resetFields();
      this.modalVisible = false;
      this.itemNum = 0;
    },
    changeinout(value) {
      // console.log(value.data);
      this.pagination.page = 1;
      if (value.data == null) {
        this.getList();
      }
    },
    async onSearch(value) {
      // console.log(value);
      this.listLoading = true;
      this.pagination.page = 1;
      const { page, pageSize } = this.pagination;
      try {
        // 调用查询列表
        const { data } = await dpiaQuestionLists({
          ...{ page, pageSize },
          ...{ TopicTitle: value },
        });
        // 解构赋值
        const { Page, PageSize, Total, Lists } = data;
        // 给table赋值
        this.listData = Lists || [];
        // 给分页数据赋值
        this.pagination = {
          page: Page,
          pageSize: PageSize,
          total: Total,
        };
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
    /**
     * 删除 通用的
     * @param {*} id
     */
    async del(id) {
      await this.$nextTick();
      try {
        // 传过来的id直接请求删除api
        await dpiaQuestionDelete({ Id: id });
        this.$message.success(
          this.$t("user.verification-code.required111566110577210")
        );
        // 重新初始化列表刷新数据
        this.getList();
      } catch (error) {
        this.$message.error(error);
      } finally {
      }
    },
    // 删除
    confirm(e) {
      // console.log(e);
      this.$message.success(
        this.$t("user.verification-code.required111566110577210")
      );
    },
    cancel(e) {
      // this.$message.warning(this.$t());
    },
    // 题目类型
    handleChangeProbType(value) {
      this.optionsList=[];
      this.form.setFieldsValue({
        TopicType: value,
      });

      if (value == 1 || value == 2) {
        this.probTypeShow = true;
        // 判断当时多选题的时候，隐藏总体的是否展示补充框
        if (value == 2||value==1) {
          this.TopicRequiredif = false;
        } else {
          this.TopicRequiredif = true;
        }
      } else {
        this.probTypeShow = false;
      }
    },
    // 选项数量
    handleChangeItemNum(value) {
      this.form.setFieldsValue({
        itemNum: value,
      });
      this.itemNum = value;
    },
    deleteOption(id) {
      this.optionsList = this.optionsList.filter(item => {
        return item.id !== id
      })
    }
  },
};
</script>

<style lang="less" scoped>
:deep(.ant-drawer-body) {
  min-height: 200px !important;
  padding-bottom: 100px;
  .delete-button {
    position: absolute;
    right: 54px;
    top: 0;
  }
}
.ant-pagination {
  float: right;
}

/deep/ .ant-form-item-label {
  display: inline-block;
  overflow: visible !important;
  // line-height: 39.9999px;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
  // margin-left: 16px;
}

.dlex {
  // width: 500px;
  display: flex;
  align-items: center;

  > .boxinfo {
    // flex: 1;
    width: 140px;
  }
}

:deep(.sp-item .ant-form-item-label) {
  transform: translateX(-22px);
}
.sp-item-child {
  margin-bottom: 0 !important;
  transform: translateX(-48px);
  :deep(.ant-form-explain){
    margin-left: 47px;
  }
}
:deep(.add-options-btn) {
  margin-left: 294px;
}
:deep(.button-one){
  margin-left:45px;
}
:deep(.option-enter) {
  margin-left: 80px;
}
</style>
